<script>
export default {
  name: 'table-head',
  props: {
    columns: {
      type: Array,
      required: true,
    },
    subColumns: {
      type: Array,
      default () {
        return []
      }
    },
    showLineNumber: {
      type: Boolean,
      default: true,
    },
    isTableOfComprehensiveEnergyConsumptionPerUnitProduct: {
      type: Boolean,
      default: false,
    },
    isEnergySavingRenovationProjectInformationTable: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    // 获取表头最大行数（对应 columns的层级）
    rowCount () {
      const columns = this.columns
      // 获取children层级
      const getTreeLevel = (arr) => {
        let maxLevel = 0;
        (function callBack (arr, level) {
          ++level
          maxLevel = Math.max(level, maxLevel);
          for (let i = 0; i < arr.length; i++) {
            const item = arr[i];
            if (item.children && item.children.length > 0) {
              callBack(item.children, level);
            }
          }
        })(arr, maxLevel);
        return maxLevel;
      }
      return getTreeLevel(columns)
    },
  },
  methods: {
    // 获取表头某一层
    getColumnsByLevel (x = 1) {
      const columns = this.columns
      const rowCount = this.rowCount
      const getColumns = (arr) => {
        const result = [];
        let level = 0;
        (function callback (arr) {
          level++
          for (let i = 0; i < arr.length; i++) {
            const { children, ...rest } = arr[i]
            if (level === x) {
              const obj = { ...rest }

              // 计算当前单元格的 colspan 和 rowspan 属性值
              if (children && children.length > 0) {
                obj.colspan = children.length
                obj.rowspan = 1
              } else {
                obj.rowspan = rowCount - x + 1
                obj.colspan = 1
              }

              if (!obj.hidden) {
                result.push(obj)
              }
            } else if (children && children.length > 0) {
              callback(children)
              level--
            }
          }
        })(arr);
        return result
      }
      return getColumns(columns)
    },
  }
}
</script>

<template>
  <thead>
    <tr v-for="row in rowCount" :key="row">
      <th v-if="showLineNumber && row === 1" :rowspan="rowCount" class="readonly width-40px">行</th>
      <th v-for="column in getColumnsByLevel(row)"
        :key="column.prop" :rowspan="column.rowspan" :colspan="column.colspan"
        :class="{
          'is-indicator-name': isTableOfComprehensiveEnergyConsumptionPerUnitProduct && column.prop === 'name',
          'is-serial-number': isEnergySavingRenovationProjectInformationTable && column.prop === 'serialNumber',
        }"
      >
        <div class="table--cell">
          {{column.label}}
          <small v-if="column.unit">
            （{{column.unit}}）
          </small>
        </div>
      </th>
    </tr>
    <tr>
      <th v-for="column in subColumns" :key="column">{{ column }}</th>
    </tr>
  </thead>
</template>
